<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表页面</title>
    <link rel="stylesheet" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
</head>
<body>
<div class="container">
    <h1>用户列表</h1>

    <!--查询表单-->
    <form class="row g-3" th:action="@{/queryUser}" method="get">
        <div class="col-auto">
            <label for="staticEmail2" class="visually-hidden">用户名</label>
            <input type="text" name="name" th:value="${params?.name}"
                   class="form-control" id="staticEmail2" placeholder="用户名">
        </div>

        <div class="col-auto">
            <label for="phone" class="visually-hidden">手机号</label>
            <input type="text" name="phone" th:value="${params?.phone}"
                   class="form-control" id="phone" placeholder="手机号">
        </div>

        <div class="col-auto">
            <label for="dept" class="visually-hidden">部门</label>
            <select name="deptCode" id="dept" class="form-control">
                <option value="">--请选择部门--</option>
                <option
                        th:each="d:${deptList}"
                        th:value="${d.deptCode}"
                        th:text="${d.deptName}"
                        th:selected="${d.deptCode == params.deptCode}">财务部
                </option>
            </select>

        </div>

        <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-3">查询</button>
        </div>
    </form>

    <form action="/batchDelete">
        <table class="table table-striped">
            <tr>
                <td>全选/全不选</td>
                <td>用户名</td>
                <td>年龄</td>
                <td>手机号</td>
                <td>部门</td>
                <td>操作</td>
            </tr>
            <tr th:each="u:${pageInfo.list}">
                <td><input type="checkbox" name="ids" th:value="${u.id}"></td>
                <td th:text="${u.name}">老王</td>
                <td th:text="${u.age}">11</td>
                <td th:text="${u.phone}">18882727272</td>
                <td th:text="${u.dept?.deptName}"></td>
                <td>
                    <a class="btn btn-primary" th:href="@{/userDetail(id=${u.id})}">查看详情</a>
                    <a class="btn btn-success" th:href="@{/userEdit(id=${u.id})}">编辑</a>
                    <a class="btn btn-danger" th:href="@{/userDelete(id=${u.id})}">删除</a>
                    <a class="btn btn-warning" th:href="@{/userMark(id=${u.id})}">标记删除</a>
                </td>
            </tr>
        </table>
        <nav>
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" th:if="${not pageInfo.isFirstPage}"
                       th:href="@{${'queryUser'}(pageNum=${pageInfo.pageNum-1},pageSize=${pageInfo.pageSize})}"
                       aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                    <a class="page-link" th:if="${pageInfo.isFirstPage}" href="javascript:void(0);"
                       aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>

                <li th:class="${pageInfo.pageNum eq pageNo ? 'page-item active' : 'page-item'}"
                    th:each="pageNo : ${#numbers.sequence(1, pageInfo.pages)}">
                    <a class="page-link" th:if="${pageInfo.pageNum eq pageNo}" href="javascript:void(0);">
                        <span th:text="${pageNo}"></span>
                    </a>

                    <a class="page-link" th:if="${not (pageInfo.pageNum eq pageNo)}"
                       th:href="@{${'queryUser'}(pageNum=${pageNo},pageSize=${pageInfo.pageSize})}">
                        <span th:text="${pageNo}"></span>
                    </a>
                </li>

                <li class="page-item">
                    <a class="page-link" th:if="${not pageInfo.isLastPage}"
                       th:href="@{${'queryUser'}(pageNum=${pageInfo.pageNum+1},pageSize=${pageInfo.pageSize})}"
                       aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                    <a class="page-link" th:if="${pageInfo.isLastPage}" href="javascript:void(0);" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            </ul>
        </nav>


        <p>
            <a th:href="@{/createUser}">新建用户</a>
            <button type="submit" class="btn btn-danger">批量删除</button>
        </p>
    </form>
</div>

</body>
</html>